<template>
  <div>
    <!-- el-card 卡片组件   会显示阴影 -->
    <el-card class="box-card" style="margin: 10px 0px">
      <!-- @GetCategorySelectId  接收子组件传入的数据 
            :Setdisabled   父组件传入数据给子组件
        -->
      <CateGorySelect
        @GetCategorySelectId="GetCategorySelectId"
        :Setdisabled="num!=0"
      />
    </el-card>

    <!-- el-card 卡片组件   会显示阴影 -->
    <el-card class="box-card">
      <div v-show="num==0">
        <el-button type="primary" icon="el-icon-plus" :disabled='!getIds.category3Id' @click="UpdataAdd_Spu('add')">添加Spu</el-button>
        <el-table  style="width: 100%;margin-top:10px" :data="getSpu.records" border>
          <el-table-column  label="序号" width="80" type="index" align="center">
          </el-table-column>
          <el-table-column  label="SPU名称" width="width" prop="spuName" align="center">
          </el-table-column>
          <el-table-column  label="SPU描述" width="width" prop="description" align="center">
          </el-table-column>
          <el-table-column  label="操作" width="width" align="center">
            <template slot-scope="{row,$index}">
                <hint-button type="success" icon="el-icon-plus" size="mini" title="添加sku" @click="Add_Sku(row)"></hint-button>
                <hint-button type="warning" icon="el-icon-edit" size="mini" title="修改spu" @click="UpdataAdd_Spu(row)"></hint-button>
                <hint-button type="info" icon="el-icon-info" size="mini" title="查看当前spu全部sku列表" @click="findBySpu(row)" ></hint-button>
                <hint-button type="danger" icon="el-icon-delete" size="mini" title="删除spu" @click="RemoveSpu(row)"></hint-button>
            </template>
          </el-table-column>
        </el-table>
          <el-pagination
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            :current-page="getSpu.current"  
            :page-sizes="[5, 10, 20, 30]"
            :page-size="getSpu.size"
            layout="prev, pager, next, jumper,->,sizes,total"
            :total="getSpu.total"
            style="textAlign:center;margin-top:10px">
          </el-pagination>
      </div>
      <SkuForm v-show="num==1" ref="getsku" @getCancel='getCancel'/>
      <!-- 接收子组件传入的数据 @getCancel 子组件点击了取消选择  则应该显示SPU列表-->
      <SpuForm v-show="num==2" ref="spuForm" @getCancel='getCancel' />


      <el-dialog :title="spuName" :visible.sync="dialogTableVisible" @close='CloseVisible' >
      <el-table :data="BySpuList" v-loading="loading">
        <el-table-column  label="名称" width="200" prop="skuName"></el-table-column>
        <el-table-column  label="价格" width="150" prop="price"></el-table-column>
        <el-table-column  label="重量" prop="weight" width="width"></el-table-column>
        <el-table-column  label="默认图片" width="150">
          <template slot-scope="{row,$index}">
            <img :src="row.skuDefaultImg" alt="" width="100px" height="100px" >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    </el-card>
  </div>
</template>

<script>
import SkuForm from '@/views/product/Spu/SkuForm'
import SpuForm from '@/views/product/Spu/SpuForm'
export default {
  name: "Spu",
  data() {
    return {
      dialogTableVisible:false,
      setdisabled: false, //设置子类的input是否显示
      num: 0, //定义选择的是哪个才显示
      page:1,//当前页码
      limit:5, //每页显示多少个数据
      getIds:{  //所有id
      },
      getSpu:{}, //获取SPU的值
      BySpuList:[],//全部spu列表
      spuName:'',
      loading:true
    };
  },
  // 注册组件
  components:{
    SkuForm,
    SpuForm
  },
  methods: {
     // 获取spu列表方法
    async getSpuList(page,limit,category3Id){
      // 发送获取spu请求
      let result = await this.$API.spu.getSpuList(page,limit,category3Id)
       if (result.code==200) {
        //  把获取的spu值赋值给getSpu
          this.getSpu = result.data
      }
    },
    // 获取子类传入的3个id属性值方法 
    GetCategorySelectId(getIds) {
      // 收集id1 id2 id3
      this.getIds = getIds
      // 发送获取spu列表请求
      this.getSpuList(this.page,this.limit,getIds.category3Id)
    },
    // 点击分页page方法  获取点击index
    handleCurrentChange(page){
      this.page = page
      // 重新发送Spu请求
      this.getSpuList(this.page,this.limit,this.getIds.category3Id)
    },
    //切换一页展示多少条数据 方法
    handleSizeChange(limit){
      this.limit = limit
      // 重新发送Spu请求
      this.getSpuList(this.page,this.limit,this.getIds.category3Id)
    },
     // 添加Spu与修改SPu方法
    UpdataAdd_Spu(row){
      // 如果点击的是修改与添加Spu按钮 则显示 Spu页面
      this.num=2
       // 获取品牌数据
        this.$refs.spuForm.getTrademarkList(this.getIds.category3Id)
         //获取平台的全部销售属性（3个）
        this.$refs.spuForm.baseSaleAttrList()
      if (row!='add') {
          // 获取spu基本信息
        this.$refs.spuForm.getSpuById(row.id)
        // 获取spu图片
        this.$refs.spuForm.spuImageList(row.id)
      }
    },
    // 添加Sku方法
    Add_Sku(row){
      // 如果点击的是添加Sku按钮 则显示 sku页面
      this.num=1
      this.$refs.getsku.getSku(row,this.getIds)
      // this.$emit('',row.spuName)
    },
    // 子组件传入的子组件方法  取消选择
    getCancel(num){
      // 点击了取消则显示SPU列表
      this.num = num.num
      if (num.type=='updata') {
          this.getSpuList(this.page,this.limit,this.getIds.category3Id)
      }else if(num.type=='add'){
          this.page = 1
           this.getSpuList(this.page,this.limit,this.getIds.category3Id)
      }
    },
    // 删除SPU
    async RemoveSpu(row){
      let result = await this.$API.spu.deleteSpu(row.id)
      if (result.code == 200) {
        if (this.getSpu.records.length<=1) {
          this.page = this.page - 1 
        }
        this.getSpuList(this.page,this.limit,this.getIds.category3Id)
         this.$message({
          message: '恭喜你，删除成功',
          type: 'success'
        });
      }
    },
    // 查看全部spu列表
    async findBySpu(row){
      this.spuName = row.spuName
      this.dialogTableVisible = true
      let result =  await this.$API.spu.findBySpuId(row.id)
      if (result.code == 200) {
        this.loading = false  //关闭加载
        this.BySpuList = result.data
      }
    },
    // 点击对话框关闭按钮
    CloseVisible(){
      this.loading = true //打开加载
      // 清空数据
      this.BySpuList=[]
    }
  },
};
</script>

<style  scoped>
/* 因为el-card会超出部分隐藏    组件select会被隐藏   */
.el-card {
  /* 取消超出部分隐藏 */
  overflow: visible !important;
}
</style>